<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器： 语法：选择器：hover 悬停功能改变效果【所有元素的可以用】
			 
			 */
			h1:hover{
				color: #e4393c;
			}
			/* 练习：页面生成200px*200px四方块  默认红色 鼠标悬停后，调整黄色 */
			div{
				width: 200px;
				height: 200px;
				background: red;
			
			}
			div:hover{
				background: yellow;
			}
			/* 超链接4种状态 */
			/* 1.超链接未点击时  伪类选择器:link */
			a:link{
				color: mediumvioletred;
				/* 下划线 */
				text-decoration: none;
			}
			/* 2.点击后的超链接  伪类选择器:visited */
			a:visited{
				color: aquamarine;
			}
			/* 3.悬停超链接状态 伪类选择器:hover */
			a:hover{
				color: yellowgreen;
			}
			/* 4.点击跳转时状态 伪类选择器:active */
			a:active{
				font-size: 60px;
			}
			/* :focus 伪类选择器针对input元素,鼠标点击输入框时候状态 */
			input:focus{
				background: #aa55ff;
			}
			li:first-child{
				color: aquamarine;
			}
			li:last-child{
				color: #aa557f;
			}
			li:nth-child(3){
				color: #5cdc5c;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 列表\表格:伪类选择器:first-child, :last-child, :nth-child(n) -->
		<ul>
			<li>还珠格格</li>
			<li>情深深雨蒙蒙</li>
			<li>一帘幽梦</li>
			<li>庭院深深</li>
			<li>水云间</li>
		</ul>
		
		<!-- 表单:伪类选择器  :focus -->
		<input type="text" >
		
		
		
		<hr >
		<h1>悬停效果</h1>
		<div></div>
		<h1>超链接了解4种状态</h1>
		<a href="#">超链接1</a>
		<a href="#">超链接2</a>
	</body>
</html>